<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        .container{
            width: 40%;
            margin: 20px auto;
        }
        .common{
            width:230px;
            height: 30px;
        }
        span{
            display:inline-block;
            width: 150px;
            text-align: right;
        }
        div{
            margin-bottom: 10px;
        }
        .message-list {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<form class="container" id="myForm">
    <!-- ********* Begin ********* -->
    <div>
        <span>用户名：</span>
        <input type="text" class="common" name="username">
    </div>
    <div>
        <span>昵称：</span>
        <input type="text" class="common" name="nickname">
    </div>
    <div>
        <span>性别：</span>
        <label for="male"><input type="radio" name="sex" id="male"> 男</label>
        <label for="female"><input type="radio" name="sex" id="female"> 女</label>
        <label for="other"><input type="radio" name="sex" id="other" disabled> 保密</label>
    </div>
    <div>
        <span>教育程度：</span>
        <select class="common" name="education">
            <option>高中</option>
            <option>中专</option>
            <option>大专</option>
            <option selected>本科</option>
            <option>硕士</option>
            <option>博士</option>
            <option>其他</option>
        </select>
    </div>
    <div>
        <span>婚姻状况：</span>
        <label for="single"><input type="radio" name="state" id="single" checked> 未婚</label>
        <label for="married"><input type="radio" name="state" id="married"> 已婚</label>
        <label for="secret"><input type="radio" name="state" id="secret"> 保密</label>
    </div>
    <div>
        <span>兴趣爱好：</span>
        <label for="football"><input type="checkbox" name="hobby" id="football"> 踢足球</label>
        <label for="basketball"><input type="checkbox" name="hobby" id="basketball"> 打篮球</label>
        <label for="film"><input type="checkbox" name="hobby" id="film" checked> 看电影</label>
    </div>
    <div>
        <span>描述自己的特点：</span>
        <textarea class="common" maxlength="20" name="description"></textarea>
    </div>
    <div>
        <span></span>
        <input type="submit" class="common" value="提交">
    </div>
    <!-- ********* End ********* -->
</form>
<div class="message-list" id="messageDisplay"></div>

<script>
    // 初始化留言列表
    function initMessages() {
        const messages = JSON.parse(localStorage.getItem('formMessages')) || [];
        renderMessages(messages);
    }

    // 渲染留言
    function renderMessages(messages) {
        const display = document.getElementById('messageDisplay');
        display.innerHTML = messages.map(msg => {
            let html = `<div style="margin: 10px 0; padding: 10px; border: 1px solid #ddd;">`;
            html += `<p>用户名：${msg.username || '未填'}</p>`;
            html += `<p>昵称：${msg.nickname || '未填'}</p>`;
            html += `<p>性别：${msg.sex || '未填'}</p>`;
            html += `<p>教育程度：${msg.education || '未填'}</p>`;
            html += `<p>婚姻状况：${msg.state || '未填'}</p>`;
            html += `<p>兴趣爱好：${msg.hobby.join(', ') || '未填'}</p>`;
            html += `<p>描述：${msg.description || '未填'}</p>`;
            html += `</div>`;
            return html;
        }).join('');
    }

    // 提交处理
    document.getElementById('myForm').addEventListener('submit', (e) => {
        e.preventDefault();
        const formData = {};
        const formElements = document.querySelectorAll('input, select, textarea');

        formElements.forEach(el => {
            const key = el.name;
            if (el.type === 'radio') {
                if (el.checked) formData[key] = el.nextSibling.textContent.trim();
            } else if (el.type === 'checkbox') {
                if (!formData[key]) formData[key] = [];
                if (el.checked) formData[key].push(el.nextSibling.textContent.trim());
            } else {
                formData[key] = el.value;
            }
        });

        // 获取已有留言
        let messages = JSON.parse(localStorage.getItem('formMessages')) || [];
        messages.push(formData);

        // 存储更新
        localStorage.setItem('formMessages', JSON.stringify(messages));

        // 清空表单
        document.getElementById('myForm').reset();
        // 重新渲染
        renderMessages(messages);
    });

    // 页面加载时初始化
    window.addEventListener('load', initMessages);
</script>
</body>
</html>